
@use '../../../../variables' as *;
@mixin flex-full-height {
  display: flex;
  flex: 1;
  flex-flow: column;
}

$shell-background-color: #000;

:host {
  display: block;
  height: calc(100% - 56px);
  width: 100%;
}

.kd-shell-content-card {
  box-sizing: border-box;
  display: block;
  height: 70%;
  width: 100%;

  .kd-shell-content-card-title {
    display: inline;
  }

  // Some hacks are required to make the terminal takes full page
  ::ng-deep {
    mat-card {
      display: flex;
      flex-flow: column;
      height: 100%;

      > mat-card-title + div {
        @include flex-full-height;
      }

      mat-card-content {
        @include flex-full-height;

        background: $shell-background-color;
        padding: 0;

        > div,
        .xterm-anchor {
          @include flex-full-height;
          height: auto;
        }
      }
    }
  }
}

.kd-shell-toolbar-select {
  width: 180px;

  .md-select-value {
    font-size: $title-font-size-base;
    min-width: 20 * $baseline-grid;
  }
}



section {
  display: table;
}

.example-label {
  display: table-cell;
  font-size: 14px;
  margin-left: 8px;
  min-width: 120px;
}

.example-button-row {
  display: table-cell;
  max-width: 600px;
}

.example-button-row .mat-mdc-button-base {
  margin: 8px 8px 8px 0;
}

.example-flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.example-button-container {
  display: flex;
  justify-content: center;
  width: 120px;
}
.example-viewport {
  height: 600px;
  width: 200px;
  border: 1px solid black;
  }
  .example-item {
  height: 50px;
  }